<template>
  <div class="result">
    <el-dialog
      title="测试结果"
      :visible.sync="resultViewStatus"
      :close-on-click-modal="false"
      width="40%"
    >
      <el-collapse accordion>
        <el-collapse-item
          v-for="(item, index) in resultData.resultShowData"
          :key="index"
        >
          <template slot="title">
            <div :style="item.attachment ? 'color:rgb(255, 74, 74)': 'color:#45b90c'">{{ item.name }}</div>
          </template>

          <el-tabs type="card">
            <el-tab-pane label="返回结果">
              <el-scrollbar wrapStyle="max-height:540px;">
                <div>
                  <pre style="overflow: auto;">{{ parseResultDeal(item.meta_datas.data[0].response.json) }}</pre>
                </div>
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="错误信息" v-if="item.attachment">
              <div>
                <pre style="overflow: auto">{{ item.attachment }}</pre>
              </div>
            </el-tab-pane>
            <el-tab-pane label="返回信息">
              <div v-for="(value, key) in item.meta_datas.data[0].response"
                   :key="key"
              >
                <div style="color: #409eff"
                     v-if="JSON.stringify(value) !== '{}' && key !== 'start_timestamp' && value && key !== 'json'"
                >
                  {{ key }}：
                  <div style="color: #000000">{{ value }}</div>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="请求信息">
              <!--<div style="color: #409eff"-->
              <!--v-if="!item.meta_datas.data[0].request.body">-->
              <!--body：-->
              <!--<pre style="overflow: auto;color: #000000">{{dealBody(item.meta_datas.data[0].request.body)}}</pre>-->
              <!--</div>-->
              <div v-for="(value, key) in item.meta_datas.data[0].request"
                   :key="key"
              >
                <div style="color: #409eff"
                     v-if="JSON.stringify(value) !== '{}' && key !== 'timeout'&& key !== 'verify' && value && key !== 'body'"
                >
                  {{ key }}：
                  <pre style="overflow: auto;color: #000000">{{ value }}</pre>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="提取信息" v-if="JSON.stringify(item.meta_datas.data[0].extract_msgs) !== '{}'">
              <div v-for="(value, key) in item.meta_datas.data[0].extract_msgs"
                   :key="key"
              >
                <div style="color: #409eff"
                     v-if="JSON.stringify(value) !== '{}' && key !== 'start_timestamp' && value && key !== 'json'"
                >
                  {{ key }}：
                  <div style="color: #000000">{{ value }}</div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
          <!--<el-button type="primary" v-clipboard:copy="JSON.stringify(item.meta_data.response_body)"-->
          <!--size="small"-->
          <!--style="position:absolute;right: 3%;">复制-->
          <!--</el-button>-->

          <!--<div v-for="(value, key) in item.meta_data.request">-->
          <!--<div style="color: #409eff" v-if="JSON.stringify(value) !== '{}' && key !== 'start_timestamp'">-->
          <!--{{ key }}：-->
          <!--<div  style="color: #000000">{{ value }}</div>-->
          <!--</div>-->

          <!--</div>-->

          <!--<div style="color: #409eff">返回结果：</div>-->
          <!--<div>-->
          <!--<pre style="overflow: auto" >{{parseResultDeal(item.meta_data.response.content)}}</pre>-->
          <!--</div>-->
          <!--<div style="color: red">错误信息：</div>-->
          <!--<div>-->
          <!--<pre style="overflow: auto">{{item.attachment}}</pre>-->
          <!--</div>-->

        </el-collapse-item>
      </el-collapse>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'runApiResult',
  props: [
    'runApiResultData'
  ],
  data() {
    return {
      resultViewStatus: false,
      resultData: {
        out: '',
        resultShowData: [
          {
            name: null,
            attachment: null,
            meta_datas: {
              data: [{
                extract_msgs: {},
                request: {
                  body: null,
                  url: null,
                  headers: null,
                  data: null,
                  params: null,
                  json: null
                },
                response: { content: null, json: null }
              }]
            }
          }
        ]
      }
    }
  },
  methods: {
    parseResultDeal(data) {
      try {
        data = JSON.parse(data)
        data = JSON.stringify(data, null, 4)
      } catch (err) {
        null
      }
      return data
    },
  },

  watch: {
    'runApiResultData': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.resultData.resultShowData = newVal['details'][0]['records']
          this.resultViewStatus = true
        }

      }
    }
  }

}
</script>
<style>
</style>
